<template>
  <div class="mainleft">
    <div v-show="videoShow" :style="videoLeft" id="videoPanel">
      <a class="close" @click="closePanel">×</a>
      <canvas id="video-canvas" ref="videoCanvas" :width="wid" :height="hei"></canvas>
    </div>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MainLeft",
  data() {
    return {
      wid:700,
      hei:450,
      path: "",
      player: null,
      videoShow: false,
      videoLeft: {
        left: "0px",
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
        value: "value",
      },
    };
  },
  mounted() {
    axios
      .post(this.$videoIp + "/getAllRegionInfo?pageNo=1&pageSize=1000")
      .then((res) => {
        let videoList = res.data.data.list;
        for (let i = 0; i < videoList.length; i++) {
          this.treeData.push({
            label: videoList[i].cameraName,
            value: videoList[i].cameraIndexCode,
          });
        }
      });
  },
  methods: {
    closePanel() {
      this.videoShow = false;
      if (this.player != null) {
        this.player.destroy();
        this.player = null;
      }
    },
    showPanel() {
      this.videoShow = true;
      let pageWidth = document.body.clientWidth;
      this.videoLeft.left = pageWidth / 2 - 350 + "px";
      var canvas = this.$refs.videoCanvas;
      if (this.player != null) {
        this.player.destroy();
        this.player = null;
      }
      if (this.path != "") {
        this.player = new JSMpeg.Player(this.path, { canvas: canvas });
      }
    },
    handleNodeClick(data) {
      //console.log(data.value);
      let that = this;
      axios
        .post(
          this.$videoIp +
            "/getCameraPreviewURL?type=ws&cameraIndexCode=" +
            data.value
        )
        .then((res) => {
          that.path = res.data.data.url;
          that.showPanel();
        });
    },
  },
};
</script>
<style scoped>
.mainleft {
  top: 0px !important;
  width: 22%;
  height: 100vh;
  background-image: url("~@/assets/img/left/mainleft.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: 140% 100%;
  position: absolute;
  left: 0px;
  z-index: 9;
  padding-top: 8.7vh;
  box-sizing: border-box;
}
.el-tree {
  background-color: transparent !important;
  color: #fff;
}
.el-tree /deep/ .el-tree-node__content:hover {
  background-color: rgba(0, 160, 233, 0.2) !important;
}
.el-tree /deep/ .is-current > .el-tree-node__content {
  /* background-color: rgba(0, 160, 233, 0.2) !important; */
  background-color: transparent !important;
}
#videoPanel {
  position: absolute;
  z-index: 9999;
  width: 700px;
  height: 450px;
  background-color: black;
  top: 50%;
  margin-top: -225px;
}
.close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 24px;
  color: white;
  cursor: pointer;
  z-index: 100001;
}
#video-canvas {
  position: absolute;
  left: 0px;
  top: 0px;
}
</style>
 